<template>
    <div class="bulkpay">
        <button @click="openDialog()">
            <svg-icon name="user-order-bulk" />
            <span>Bulk pay</span>
        </button>

        <UxDialog :visible="!!status" @close="close()">
            <!-- 选择订单 -->
            <OrderBulkpaySelect v-if="status == 'select'" @select="setSelect($event)" />

            <!-- 确认订单 -->
            <OrderBulkpayCheck v-if="status == 'check'" :select="select" :result="result" @confirm="confirm($event)" />
        </UxDialog>

        <!-- 支付订单 -->
        <OrderPayment ref="payment" @paySuccess="paySuccess" @payFailure="payFailure" v-if="status" />

        <!-- 支付失败 -->
        <UxDialog title="" :visible="result == 'error'" @close="result = ''">
            <div class="pay-failure">
                <img src="@/assets/images/order/dialog-bulkpay-failure.png" alt="">
                <p>
                    <strong>Payment failed</strong>
                    <span>Please try to pay again.</span>
                </p>
                <button type="primary" @click="result = ''">Got It</button>
            </div>
        </UxDialog>
    </div>
</template>
<script>
export default {
    name: "OrderBulkpay",
    data () {
        return {
            result: "",
            status: "",
            select: [],
        };
    },

    methods: {
        openDialog () {
            this.status = 'select'
        },
        // 选择好商品，进入预支付界面
        setSelect (orderList) {
            this.status = "check";
            this.select = orderList;
        },

        // 确定批量支付
        confirm (option) {
            this.$refs.payment.open({
                amount: option.amount,
                codes: option.codes,
                action: 'batch',
                product: this.select,
                billing: null
            });
        },

        paymentClose () {
            this.$refs.payment && this.$refs.payment.onClose && this.$refs.payment.onClose();
        },

        // 支付失败
        payFailure (error) {
            this.paymentClose()
            this.result = "error";
        },
        // 支付成功
        paySuccess () {
            this.paymentClose()
            this.result = "success";
        },

        // 关闭页面
        close () {
            // 如果状态是成功的，就更新一下
            if (this.result == "success") {
                this.$emit("update");
            }

            this.result = "";
            this.status = "";
            this.error = false;
            this.success = false;
        },

        // 支付冲突引起的关闭
        doConflict () {
            this.result = "";
            this.status = "";
            this.error = false;
            this.success = false;
            this.$emit("update");
        }
    },
    created () {
        const params = this.$route.params || {}
        this.$on('global:ORDER_BULK_OPEN', this.openDialog);
        this.$on('global:ORDER_BULK_CLOSE', this.doConflict);
        params.action == "bulkpay" && this.openDialog()
    },
};
</script>
<style lang="scss" scoped>
.bulkpay {
    & > button {
        width: 144px;
        height: 40px;
        border-radius: 8px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }
        // &:hover {
        //     svg {
        //         color: #c94175;
        //     }
        // }
    }
}

.pay-failure {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    padding: 66px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
        display: block;
        width: 80px;
        height: 80px;
    }
    p {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: Roboto, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 22px;
        strong {
            font-family: Roboto-Medium;
            font-weight: 500;
        }
    }
    button {
        margin-top: 48px;
        width: 100%;
    }
}

// .order-payment::v-deep {
//     .order-payment-other {
//         .payment-card {
//             margin-top: 0;
//         }
//     }
// }
// 批量支付只能用钱包支付
// .order-payment::v-deep {
//     .dialog-body {
//         display: flex;
//         align-items: center;
//         justify-content: center;
//     }
//     .order-payment-before {
//         width: 348px;
//         // height: 480px;
//         padding: 0;

//         & > .order-payment-before-currency {
//             margin: 0 32px;
//             padding-top: 44px;
//             padding-bottom: 14px;
//         }

//         & > h3 {
//             height: 56px;
//             img {
//                 width: 24px;
//                 height: 24px;
//             }
//             span {
//                 font-size: 20px;
//             }
//         }

//         &[currency='USD'] {
//             & > h3 {
//                 margin-top: 90px;
//                 height: 30px;
//                 font-size: 24px;
//             }
//         }

//         .payment-wallet {
//             width: 100%;
//             display: flex;
//             border: none;
//             margin: 0;
//         }
//         .payment-wallet-holder {
//             border: none;
//             margin: 0;
//             width: 100%;
//             height: auto;
//             background: none;
//             box-sizing: border-box;
//             padding: 60px 32px 44px;

//             h4 {
//                 font-size: 14px;
//                 line-height: 16px;
//                 height: 16px;
//                 margin-bottom: 12px;
//             }

//             & > p {
//                 width: 100%;
//                 padding-left: 168px;
//                 margin-bottom: 84px;
//                 &::before {
//                     left: 12px;
//                 }

//                 &::after {
//                     left: 160px;
//                 }
//             }

//             button {
//                 width: 100%;
//             }
//         }
//         .order-payment-other {
//             display: none;
//         }
//     }
// }
</style>
